<template>
  <div class="page">
    <van-nav-bar
        title="个人中心"
        left-text="返回"
        left-arrow
        @click-left="handleBack"
    />
    <div class="content">
      <img v-if="repairPersonnel" src="@/assets/工人头像.jpg" alt="头像" class="avatar" />
      <h1 class="title" v-if="repairPersonnel">{{ repairPersonnel.fullName }}</h1>
      <van-field v-if="repairPersonnel" v-model="repairPersonnel.username" label="用户名" disabled />
      <van-field v-if="repairPersonnel" v-model="repairPersonnel.maintenanceType" label="维修类型" disabled />
      <van-field v-if="repairPersonnel" v-model="repairPersonnel.email" label="邮箱" disabled />
      <van-button v-if="repairPersonnel" type="danger" block @click="onLogout">退出登录</van-button>
    </div>
    <van-tabbar v-model="activeTab" fixed bottom>
      <van-tabbar-item icon="home-o" @click="navigateTo('technician/home')">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" @click="navigateTo('messages')">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="navigateTo('technician/personal-center')">个人中心</van-tabbar-item>
    </van-tabbar>
    <Alert v-if="showToast" :theme="toastTheme" :message="toastMessage" :duration="3000" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import axios from 'axios';
import Alert from '../MessageAlert.vue';

const router = useRouter();
const store = useStore();
const repairPersonnel = computed(() => store.state.user);

const activeTab = ref(2); // 个人中心
const showToast = ref(false);
const toastMessage = ref('');
const toastTheme = ref('info');

const handleBack = () => {
  router.back();
};

const navigateTo = (page) => {
  router.push(`/${page}`);
};

const showAlert = (message, theme) => {
  toastMessage.value = message;
  toastTheme.value = theme;
  showToast.value = true;
};

const getRepairPersonnelInfo = async () => {
  if (repairPersonnel.value && repairPersonnel.value.repairPersonnelId) {
    try {
      const response = await axios.get('http://localhost:8080/repair/me', {
        params: { repairPersonnelId: repairPersonnel.value.repairPersonnelId }
      });
      if (response.data.success) {
        store.dispatch('login', response.data.repairPersonnel);
      } else {
        showAlert('获取用户信息失败', 'error');
      }
    } catch (error) {
      console.error('获取用户信息失败:', error);
      showAlert('获取用户信息失败，请重试', 'error');
    }
  } else {
    showAlert('用户未登录', 'error');
    router.push('/technician-login');
  }
};

const onLogout = () => {
  store.dispatch('logout');
  router.push('/technician-login');
};

onMounted(() => {
  getRepairPersonnelInfo();
});
</script>

<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.title {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

.van-field {
  margin-bottom: 10px;
  width: 100%;
}

.van-button {
  margin-top: 20px;
}
</style>
